<!--
 * @Description: home
 * @Author: your name
 * @Date: 2019-09-09 20:00:46
 * @LastEditTime: 2019-09-16 17:20:21
 * @LastEditors: Please set LastEditors
 -->
<template >
  <div class="home-wrap">
    <div class="topNavs">
      <van-nav-bar title="辰安消防机构服务" />
    </div>
    <div class="trueAlarm-wrap">
      <div class="bg1"></div>
      <div class="trueAlarm"
           @click="toAlarm">
        <div class="nums">{{alarmNum}}<span>起</span></div>
        <p>所辖范围本年真警数</p>
      </div>
    </div>
    <div class="message-wrap">
      <div class="bigTitle">安全咨询</div>
      <ul class="message-list">
        <li v-for="(item,index) in list"
            @click="toDetail(item.id)"
            :key="index">
          <div class="left-block">
            <h3 class="title">{{item.informationTitle}}</h3>
            <p>{{item.informationType}} &nbsp; {{item.updateDate}}</p>
          </div>
          <div class="right-block">
            <img src="../../assets/img/pic.png">
          </div>
        </li>

      </ul>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      list: [],
      user: "",
      openId: "",
      alarmNum: "0"
    }
  },

  mounted () {
    //真警情数

    this.user = JSON.parse(localStorage.getItem("user"));
    this.openId = localStorage.getItem("openId");


    //咨询列表
    this.querySecurityInfoList();
    this.getCurrentYearAlarmNum();

  },
  methods: {

    //真警情数
    getCurrentYearAlarmNum () {
      let params = {
        // agencyId: this.user.agencyId
        agencyId: "2c938c556d0468d1016d047e39a20019"
      };
      this.$http.post("getCurrentYearAlarmNum", params).then((res) => {
        if (res.data.code == "success") {
          this.alarmNum = res.data.data.alarmNum
        } else {
          console.log(res.data);
        }
      }).catch(function (error) {
        console.log(error);
      })
    },
    //咨询列表
    querySecurityInfoList () {
      console.log(this.user, "222");
      console.log(this.user.agencyId, "33");
      let params = {
        agencyId: this.user.agencyId,
        pageNo: "1",
        pageSize: "10"
      };
      this.$http.post("querySecurityInfoList", params).then((res) => {
        if (res.data.code == "success") {

          this.list = res.data.data.rows.slice(0, 3);

        } else {
          console.log(res.data);
        }
      }).catch(function (error) {
        console.log(error);
      })


    },
    //跳转咨询详情
    toDetail (id) {
      this.$router.push({ name: 'messageDetail', params: { id: id } })//1 忘记密码 2 修改密码
    },
    //跳转真警情列表
    toAlarm () {
      this.$router.push({ name: 'alarmList', });

    }
  }
}
</script>

<style lang="scss">
@import "@/assets/css/common.scss";
.home-wrap {
  .trueAlarm-wrap {
    position: relative;
    .trueAlarm {
      text-align: center;
      position: relative;
      padding: 0.5rem 0;
      background: #000;
      width: 90%;
      margin: 0 auto;
      border-radius: 10px;
      color: $theme-color;
      line-height: 0.9;
      .nums {
        font-size: 1.4rem;
        span {
          margin-left: 5px;
          font-size: 12px;
        }
      }
    }
    .bg1 {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 1.9rem;
      background: $theme-color;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
  .message-wrap {
    width: 85%;
    margin: 0 auto;
    .bigTitle {
      font-size: 0.48rem;
      font-weight: bold;
      padding: 0.35rem 0 0.35rem 0;
      position: relative;
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #d3d5dc;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    .message-list {
      li {
        display: flex;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        padding: 10px 0;
        .left-block {
          width: 60%;
          padding-right: 10px;
          .title {
            margin: 0;
            padding: 0;
            font-weight: normal;
            height: 1.7rem;
            overflow: hidden;
            font-size: 0.42rem;
          }
          p {
            font-size: 0.33rem;
            color: #808080;
          }
        }
        .right-block {
          width: 40%;
          img {
            width: 100%;
            height: 2.5rem;
            border-radius: 8px;
          }
        }
        &:after {
          position: absolute;
          box-sizing: border-box;
          content: " ";
          pointer-events: none;
          right: 0;
          bottom: 0;
          left: 0;
          border-bottom: 1px solid #d3d5dc;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
      }
    }
  }
}
</style>